<template>
    <div class="pg-login">
        <div class="pg-container">
            <div class="logonimg">
                <img :src="loginImg" alt="">
            </div>
            <div class="infos">
                <div class="login">
                    <div class="header">
                        <div class="title">综能设备管理</div>
                    </div>
                    <div class="container">
                        <div class="editRow">
                            <div class="lab">用户名</div>
                            <div class="editor">
                                <el-input v-model="pageState.userCode"></el-input>
                            </div>
                            <div class="icon">
                                <i class="fa fa-user"></i>
                            </div>
                        </div>
                        <div class="editRow">
                            <div class="lab">密码</div>
                            <div class="editor">
                                <el-input type="password" v-model="pwd"></el-input>
                            </div>
                            <div class="icon">
                                <i class="fa fa-key"></i>
                            </div>
                        </div>
                        <div class="submit">
                            <el-button @click="checkLogin" type="primary">登录</el-button>
                        </div>
                    </div>
                    <div class="copyright">copy right @ 综能电力 2025</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {admin} from './admin'
    export default {
        mounted(){
            var me = this;
            try {
                me.pageState = admin.api.getSessionObj(me.pageStateKey , me.pageState)
            } catch (error) {
                console.log(error)
            }
        },
        data() {
            return {
                loginImg: require('../res/imgs/loginbg.webp'),
                pageState:{
                    userCode :""
                },
                pageStateKey : "zn_admin_login",
                pwd:""
            }
        },
        methods:{
            checkLogin(){
                var me = this;
                try {
                    var ps ={
                        userCode: me.pageState.userCode ,
                        sec: me.pwd
                    };
                    var execProcName = "ac_checkLogin";
                    admin.api.execProc( execProcName , ps).then(_res=>{
                        if( _res.recordset && _res.recordset.length>0){
                            admin.api.setSessionObj( me.pageStateKey , me.pageState);
                            var key = "zn_admin_login_userId";
                            admin.api.setSessionObj(key , {uid: _res.recordset[0].userId});
                            me.$message.success('登录成功！');
                            me.$router.push({
                                path:"home"
                            })
                        }
                        else{
                            me.$message.error('用户名或密码错误！');
                        }
                    })
                } catch (error) {
                    console.log(error)
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .pg-login{
        position: relative;
        height: 100%;

        .pg-container{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            display: flex;
            box-shadow: 0ch 0ch 15px #e0e0e0;
            border-radius: 0px;



            .logonimg{
                width: 500px;
                height: 336px;
                img{
                    width: 100%;
                    height: 100%;
                    border-radius: 10px 0 0 10px    ;
                }
            }
            .infos{
                width: 300px; 
                padding: 20px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                .login{
                    .header{
                        margin-bottom: 20px;
                        .title{
                            font-size: 20px;
                            color: #333;
                            text-align: center;
                        }
                    }
                    .container{
                        margin-bottom: 20px;
                        .editRow{
                            position: relative;
                            margin-bottom: 15px;
                            .lab{ 
                                text-align: left;
                                margin-bottom: 5px;
                                font-weight: bold;
                            }
                            .editor{
                                flex: 1;
                                
                            }
                            .icon{
                                position: absolute;
                                right: 10px;
                                bottom: 7px;
                                i{
                                    font-size: 18px;
                                    color: #999999
                                }
                            }
                        }
                    }

                }

            }
        }
    }
</style>